<template>
  <!-- 3 -->
  <div class="right-header3">
    <div class="playbutton">
      <slot name="play">
        <div class="play" @click="playList()">播放</div>
      </slot>

      <div class="addplay"></div>
    </div>

    <div class="add" @click="add">
      <slot name="add"> 收藏 </slot>
      <!-- <i> ({{ topList.subscribedCount }}) </i> -->
    </div>

    <div class="share" @click="share">
      <slot name="share"> 分享 </slot>
      <!-- <i> ({{ topList.shareCount }}) </i> -->
    </div>

    <div class="down" @click="down">下载</div>

    <div class="speak" @click="speak">
      <slot name="comment">
        <!-- <i> ({{ topList.commentCount }}) </i> -->
      </slot>
    </div>
  </div>
</template>

<script>
import { getSongURL } from '@/api/api.js'
export default {
  methods: {
    // 播放
    playList() {
      let songList = []
      for (let item of this.topList.trackIds.slice(0, 10)) {
        getSongURL(item.id).then((res) => {
          songList.push(res.data[0].url)
        })
      }
      console.log(songList)
      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', songList)
    },
    // 点击添加
    add() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    },
    // 点击分享
    share() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    },
    // 点击下载
    down() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    },
    // 点击评论
    speak() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.play,
.addplay,
.add,
.share,
.down,
.speak,
.button {
  background: url('https://s2.music.126.net/style/web2/img/button2.png?3b1af8779cab6a84196c071d5a3f4343')
    no-repeat 0 9999px;
}
.right-header3 {
  display: flex;
  margin: 10px 0;
  .playbutton {
    width: 98px;
    height: 31px;
    display: flex;
    .play {
      width: 66px;
      height: 31px;
      color: #fff;
      background-position: right -387px;
      border-radius: 3px 0 0 3px;
      text-align: center;
      line-height: 31px;

      &:hover {
        background-position: right -469px;
        cursor: pointer;
      }
    }
    .addplay {
      width: 31px;
      height: 31px;
      background-position: 0 -1588px;
      &:hover {
        background-position: -40px -1588px;
        cursor: pointer;
      }
    }
  }
  .add {
    margin-left: 10px;
    width: 60px;
    height: 31px;
    background-position: 0 -977px;
    border-right: 1px solid #ccc;
    // background-position:  right -1020px;
    padding-left: 28px;
    line-height: 31px;
    &:hover {
      background-position: 0 -1063px;
      cursor: pointer;
    }
  }
  .share {
    margin-left: 10px;
    width: 60px;
    height: 31px;
    background-position: 0 -1225px;
    border-right: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    text-align: center;
    line-height: 31px;
    padding-left: 20px;
    &:hover {
      cursor: pointer;
      background-position: 0 -1268px;
    }
  }
  .down {
    margin-left: 10px;
    width: 59px;
    height: 31px;
    background-position: 0 -2761px;
    border-right: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    text-align: center;
    line-height: 31px;
    padding-left: 20px;
    &:hover {
      cursor: pointer;
      background-position: 0 -2805px;
    }
  }
  .speak {
    margin-left: 10px;
    width: 70px;
    height: 31px;
    background-position: -0 -1465px;
    border-right: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    text-align: center;
    line-height: 31px;
    padding-left: 20px;
    &:hover {
      cursor: pointer;
      background-position: 0 -1508px;
    }
  }
}
</style>
